<script>
import { ref } from 'vue';
import { showNotify } from 'vant';
import { showDialog, showConfirmDialog, showLoadingToast } from 'vant';
import { updateAccount, SENDMESSAGE } from "../api/my";

export default {
    setup() {
        const username = ref('13789135702');
        const password = ref('15555037478');
        const password1 = ref('15555037478');
        const sms = ref('');
        const onSubmit = (values) => {
            console.log('submit', values);
        };
        let second = ref(0);
        let a = ref(true);
        const fasongyanzhenma = () => {
            if (username.value.length != 11) {
                showNotify({ type: 'danger', message: '原号码长度不能小于11位数' });
            }
            if (password.value.length != 11) {
                showNotify({ type: 'danger', message: '新号码长度不能小于11位数' });
            }
            if (password1.value.length != 11) {
                showNotify({ type: 'danger', message: '确认号码长度不能小于11位数' });
            }
            if (password.value == username.value) {
                showNotify({ type: 'danger', message: '原号码不能与新号码一致' });
            }
            if (password.value != password1.value) {
                showNotify({ type: 'danger', message: '新号码必须与确认号码一致' });
            }
            if (username.value.length == 11 && password.value.length == 11 && password1.value.length == 11 && password.value != username.value && password.value == password1.value) {
                SENDMESSAGE({
                    account: password.value,
                }).then((res) => {
                    if (res.result == 0) {
                        showNotify({ type: 'success', message: res.message });
                        a = false;
                        second = 59;
                        console.log(a, '1111111');
                        console.log(second, '22222');
                        const daojishi = () => {
                            setTimeout(() => {
                                second--
                            }, 1000);
                        }
                        daojishi();
                    } else {
                        showDialog({
                            title: '提示',
                            message: res.message,
                        }).then(() => {
                            // on close
                        });
                    }
                })
            }
        }
        const xiugai = () => {
            if (username.value.length != 11) {
                showNotify({ type: 'danger', message: '原号码长度不能小于11位数' });
            }
            if (password.value.length != 11) {
                showNotify({ type: 'danger', message: '新号码长度不能小于11位数' });
            }
            if (password1.value.length != 11) {
                showNotify({ type: 'danger', message: '确认号码长度不能小于11位数' });
            }
            if (sms.value.length != 4) {
                showNotify({ type: 'danger', message: '请输入验证码' });
            }
            if (password.value == username.value) {
                showNotify({ type: 'danger', message: '原号码不能与新号码一致' });
            }
            if (password.value != password1.value) {
                showNotify({ type: 'danger', message: '新号码必须与确认号码一致' });
            }
            if (username.value.length == 11 && password.value.length == 11 && password1.value.length == 11 && password.value != username.value && password.value == password1.value && sms.value.length == 4) {
                showConfirmDialog({
                    title: '提示',
                    message:
                        '确定要修改嘛？',
                }).then(() => {
                    showLoadingToast({
                        message: '加载中...',
                        forbidClick: true,
                        loadingType: 'spinner',
                    });
                    updateAccount({
                        phone: username.value,
                        newPhone: password.value,
                        rePhone: password1.value,
                        sms: sms.value,
                    }).then((res) => {
                        if (res.result === 0) {
                            showNotify({ type: 'success', message: res.message });
                            username.value = ''
                            password.value = ''
                            password1.value = ''
                            sms.value = ''
                        } else { 
                            showNotify({ type: 'danger', message: res.message });
                        }
                    })
                })
                    .catch(() => {
                    });
            }
        }
        return {
            a,
            second,
            fasongyanzhenma,
            username,
            password,
            password1,
            sms,
            onSubmit,
            xiugai
        };
    }
}
</script>
<template>
    <div style="padding: 15px;">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" :maxlength="11" label="原号码" placeholder="请输入原号码"
                    :rules="[{ required: true, message: '请填写原号码' }]" />
                <van-field v-model="password" :maxlength="11" label="新号码" placeholder="请输入新号码"
                    :rules="[{ required: true, message: '请填写新号码' }]" />
                <van-field v-model="password1" :maxlength="11" label="确认号码" placeholder="请确认新号码"
                    :rules="[{ required: true, message: '请填写确认号码' }]" />
                <van-field v-model="sms" :maxlength="4" center clearable label="短信验证码" placeholder="请输入短信验证码">
                    <template #button>
                        <van-button size="small" v-if="second == 0" @click="fasongyanzhenma()" type="primary">
                            <van-tag type="primary">发送验证码</van-tag>
                        </van-button>
                        <van-button size="small" v-if="second != 0" disabled type="primary">
                            <van-tag type="primary" v-model="second"></van-tag>
                        </van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block @click="xiugai" type="primary" native-type="submit">
                    修改账号信息
                </van-button>
            </div>
        </van-form>
    </div>

</template>
